//@import './_var.scss';

:root {
  --brand-1: #{$brand-1};
  --brand-2: #{$brand-2};
  --brand-3: #{$brand-3};
  --black: #{$black};
  --white: #{$white};
  --gray-1: #{$gray-1};
  --gray-2: #{$gray-2};
  --gray-3: #{$gray-3};
  --gray-4: #{$gray-4};
  --gray-5: #{$gray-5};
  --gray-6: #{$gray-6};
  --gray-7: #{$gray-7};
  --gray-8: #{$gray-8};
  --light-1: #{$gray-6};
  --light-2: #{$gray-7};
  --highlight-1: var(--brand-1);
  --highlight-2: var(--brand-2);
  --link-color: var(--blue);
  --blue: #{$blue};
  --gray-dark: #{$gray-dark};
  --green: #{$green};
  --orange: #{$orange};
  --red: #{$red};
  --yellow: #{$yellow};
  --yellow-light: #{$yellow-light};
  --font-size-xs: #{$font-size-xs};
  --font-size-sm: #{$font-size-sm};
  --font-size-md: #{$font-size-md};
  --font-size-lg: #{$font-size-lg};
  --radius-sm: #{$border-radius-sm};
  --radius-md: #{$border-radius-md};
  --radius-lg: #{$border-radius-lg};
  --shadow-1: #{$shadow-1};
  --shadow-2: #{$shadow-2};
  --shadow-3: #{$shadow-3};
  --safe-top: 0px;
  --safe-bottom: 0px;
  --gutter: #{$gutter};
  --btn-primary-border-color: #{$btn-primary-border-color};
  --btn-primary-bg: #{$btn-primary-bg};
  --btn-primary-color: #{$btn-primary-color};
  --rate-width: 32px;
}

@supports (top: constant(safe-area-inset-top)) {
  :root {
    --safe-top: constant(safe-area-inset-top);
    --safe-bottom: constant(safe-area-inset-bottom);
  }
}

@supports (top: env(safe-area-inset-top)) {
  :root {
    --safe-top: env(safe-area-inset-top);
    --safe-bottom: env(safe-area-inset-bottom);
  }
}


page {
  --brand-1: #{$brand-1};
  --brand-2: #{$brand-2};
  --brand-3: #{$brand-3};
  --black: #{$black};
  --white: #{$white};
  --gray-1: #{$gray-1};
  --gray-2: #{$gray-2};
  --gray-3: #{$gray-3};
  --gray-4: #{$gray-4};
  --gray-5: #{$gray-5};
  --gray-6: #{$gray-6};
  --gray-7: #{$gray-7};
  --gray-8: #{$gray-8};
  --light-1: #{$gray-6};
  --light-2: #{$gray-7};
  --highlight-1: var(--brand-1);
  --highlight-2: var(--brand-2);
  --link-color: var(--blue);
  --blue: #{$blue};
  --gray-dark: #{$gray-dark};
  --green: #{$green};
  --orange: #{$orange};
  --red: #{$red};
  --yellow: #{$yellow};
  --yellow-light: #{$yellow-light};
  --font-size-xs: #{$font-size-xs};
  --font-size-sm: #{$font-size-sm};
  --font-size-md: #{$font-size-md};
  --font-size-lg: #{$font-size-lg};
  --radius-sm: #{$border-radius-sm};
  --radius-md: #{$border-radius-md};
  --radius-lg: #{$border-radius-lg};
  --shadow-1: #{$shadow-1};
  --shadow-2: #{$shadow-2};
  --shadow-3: #{$shadow-3};
  --safe-top: 0px;
  --safe-bottom: 0px;
  --gutter: #{$gutter};
  --btn-primary-border-color: #{$btn-primary-border-color};
  --btn-primary-bg: #{$btn-primary-bg};
  --btn-primary-color: #{$btn-primary-color};
  --rate-width: 32px;
}

@supports (top: constant(safe-area-inset-top)) {
  page {
    --safe-top: constant(safe-area-inset-top);
    --safe-bottom: constant(safe-area-inset-bottom);
  }
}

@supports (top: env(safe-area-inset-top)) {
  page {
    --safe-top: env(safe-area-inset-top);
    --safe-bottom: env(safe-area-inset-bottom);
  }
}